import React from 'react'
import {connect} from 'react-redux'

// layouts
import AppLayout from "../../layouts/AppLayout"
import ColorBgLayout from "../../layouts/ColorBgLayout/ColorBgLayout"

// components
import MyHeader from "./components/MyHeader/MyHeader"
// import MyVIP from "./components/MyVIP/MyVIP"
import MyMenu from "./components/MyMenu/MyMenu"
import MsgFollowAndWallet from "./components/MsgFollowAndWallet/MsgFollowAndWallet"
import MyCoinsAndCheckIn from "./components/MyCoinsAndCheckIn/MyCoinsAndCheckIn"

// antd
import {Toast, WhiteSpace, WingBlank,} from 'antd-mobile'
import {GlobalStore} from "../../context";
import withDownload from "../../high-order-component/withDownload/withDownload";
import constants from "../../utils/constants";

import goldBgSrc from '../../res/images/web/my/金币板块@2x.png'
import ybBgSrc from '../../res/images/web/my/应币板块@2x.png'
import fuliBbSrc from '../../res/images/web/my/福利发放@2x.png'
import LocalStorageService from "../../utils/LocalStorageService";
import {getMyFuliCount} from "../../apis/goApis";
import {log} from "../../utils/commonfunc";

class MyContainer extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.state = {
            downloadShow: true,
            isLogin: localStorage.getItem('isLogin'),
            fuliCount: 0,
        }
    }

    componentDidMount() {
        this.setDownloadShow()
        this.getFuliCount()
    }

    getFuliCount() {
        if (this.uid) {
            getMyFuliCount({
                Uid: this.uid,
            }).then(res => {
                this.setState({
                    fuliCount: res.data.count,
                })
            })
        }

    }

    setDownloadShow = () => {
        const downloadShow = this.context.downloadApp.show
        this.setState({
            downloadShow,
        })
    }

    hidden = () => {
        this.context.downloadApp.hidden()
        this.setState({
            downloadShow: false,
        })
    }

    renderMoneyBlock = (key) => {
        const bgs = {
            'wallet': goldBgSrc,
            'yb': ybBgSrc,
            'fuli': fuliBbSrc,
        }
        const texts = {
            'wallet': '金币',
            'yb': '应币',
            'fuli': '碎片',
        }
        const numbers = {
            // 'wallet': ,
            'wallet': this.props.userDetail.Gold,
            'fuli': this.state.fuliCount,
            'yb': 0,
        }
        const callbacks = {
            'wallet': () => this.props.history.push('./wallet'),
            'fuli': () => this.props.history.push('./my-fuli'),
            'yb': () => Toast.info('正在建设中...', 1),
        }
        const bgSrc = bgs[key]
        return <div
            style={{
                background: `no-repeat url(${bgSrc}) 50% 50%/cover`,
                height: '73px',
                width: '50%',
                marginRight: key === 'wallet' ? '8px' : '0',
                padding: '16px 12px',
            }}
            onClick={() => callbacks[key]()}
        >
            <p className='mg-b-8px' style={{color: 'rgba(255, 255, 255, 0.4)',}}>{texts[key]}</p>
            <p
                style={{
                    fontSize: '30px',
                    fontWeight: '600',
                    color: '#FFA500',
                    lineHeight: '24px',
                }}
            >{numbers[key]}</p>
        </div>
    }

    render() {
        const {
            isLogin,
            userDetail,
            checkinInfo,
        } = this.props

        return (
            <AppLayout>
                {this.props.renderDownloadHint()}
                <MyHeader
                    isLogin={isLogin}
                    userDetail={userDetail}
                />
                <div
                    className='flex-center-align-center'
                    style={{
                        background: constants.themeColor,
                        padding: '12px 8px',
                    }}
                >
                    {this.renderMoneyBlock('wallet')}
                    {this.renderMoneyBlock('fuli')}
                </div>
                <WingBlank>
                    {/*<MyCoinsAndCheckIn*/}
                    {/*    isLogin={isLogin}*/}
                    {/*    userDetail={userDetail}*/}
                    {/*    checkinInfo={checkinInfo}*/}
                    {/*/>*/}
                    <WhiteSpace/>
                    <MsgFollowAndWallet/>
                    <WhiteSpace/>
                    {/*<MyVIP*/}
                    {/*    userDetail={userDetail}*/}
                    {/*/>*/}
                    <WhiteSpace/>
                    <MyMenu/>
                    <WhiteSpace/>
                </WingBlank>
                {/*<ColorBgLayout>*/}
                {/*    */}
                {/*</ColorBgLayout>*/}
            </AppLayout>
        )
    }
}

MyContainer.contextType = GlobalStore
const mapStateToProps = state => ({
    userid: state.global.user.userid,
    isLogin: state.global.isLogin,
    userDetail: state.user.userdetail,
    checkinInfo: state.user.checkinInfo,
})

const mapDispatchToProps = ({user: {fetchUserDetail}, global: {doLogoutGo, doFreshToken,},}) => ({
    fetchUserDetail: (id) => fetchUserDetail(id),
})

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(withDownload(MyContainer))

